import React, { ReactElement ,useState,useRef} from 'react'
import {useSelector,useDispatch} from "umi"
import {chongHuiYuan,cancleHuiYuan} from "../../api/huiyuanReq"
// import style from './index.less'
import { Space, Card, Table, Button, message, Modal, Form, Input,DatePicker } from 'antd';
interface Props {

}

export default function Vip({ }: Props): ReactElement {
 const [modal2Visible,changType] =useState(false);
 const dispatch = useDispatch();

 let [ids,setIds] =useState('');
 const { data}:any=useSelector((state:any)=>({
  data:state.huiyuanModel.huiyuanList
 }))
 const del=(_id:string):void=>{
  message.error("就一条数据，没法删除"+_id)
 }

 const eleFrom:any=useRef();

const setVip=(_id:string):void=>{
    setIds(_id);
    changType(true)
}

 const setModal2Visible=(type:boolean):void=>{
      changType(type)
 }

  

  const onFinish = (values:any):void => {
    const date=new Date(values.date._d);
    const yue=date.getMonth()+1>9?date.getMonth()+1:"0"+(date.getMonth()+1);
    const ri=date.getDate()>9?date.getDate():"0"+date.getDate()
    const str=date.getFullYear() +"-"+yue+"-"+ri;  
    chongzhi({_id:ids,date:str});
};


const chongzhi=async(obj:object)=>{
     const res=await chongHuiYuan(obj);  
     if(res&&res.meta&&res.meta.status===200)
     {
      message.success("充值成功！");
      dispatch({
        type:"huiyuanModel/getHuiyuan"
      });
     }else{
      message.success("充值失败！")
     }
     setModal2Visible(false);
     
}


const cancleVip=async(_id:string)=>{
    const res=await cancleHuiYuan({_id});
    if(res&&res.meta&&res.meta.status===200)
    {
     message.success("取消成功！");
     dispatch({
      type:"huiyuanModel/getHuiyuan"
    })
    }else{
     message.success("取消失败！")
    }
    
}

  const confirms = ():void => { 
    eleFrom.current.submit();   
};



 const columns:any = [
    {
        title: '会员编号',
        dataIndex: '_id',
        key: '_id',
        align: "center"
    },
    {
        title: '会员昵称',
        dataIndex: 'nickName',
        key: 'nickName',
        align: "center"
    },
    {
        title: '会员所在地',
        dataIndex: 'province',
        key: 'province',
        align: "center"
    },
    {
        title: '是否VIP',
        dataIndex: 'vip',
        key: 'vip',
        align: "center",
        render:(vip:any)=>(
          <span>{vip?"VIP会员":'普通用户'}</span>
        )
    },
    {
        title: '会员到期时间',
        dataIndex: 'vipdate',
        key: 'vipdate',
        align: "center",
        render:(vipdate:any)=>(
          <span>{vipdate?vipdate:'无'}</span>
        )
    },
    {
        title: '操作',
        dataIndex: '_id',
        key: '_id',
        render:(text:any)=>(
          <Space size="middle">
          <Button type="primary" onClick={()=>del(text)} danger>删除</Button>
          <Button type="primary" onClick={()=>setVip(text)}>充值</Button>
          <Button type="dashed" onClick={()=>cancleVip(text)} >取消会员</Button>
      </Space>
        ),
        align: "center"
    }

];
const layout = {
  labelCol: { span: 5}
};


  return (
    <div style={{ display: "flex" }}>
      <Card style={{ width: "100%" }} title="会员信息">
        <Table  rowKey={(record) => record._id} pagination={{ defaultCurrent: 1, defaultPageSize: 5, showQuickJumper: true }} bordered  columns={columns} dataSource={data} />
      </Card>
      <Modal
                    destroyOnClose={true}
                    title="充值会员"
                    centered
                    visible={modal2Visible}
                    onOk={() =>setModal2Visible(false)}
                    onCancel={() => setModal2Visible(false)}
                    footer={[
                        // 定义右下角 按钮的地方 可根据需要使用 一个或者 2个按钮
                        <Button key="submit" onClick={() => setModal2Visible(false)}>取消</Button>, <Button onClick={confirms} key="ok" type="primary">确认</Button>
                    ]}
                >
                    <Form
                      {...layout}
                       ref={eleFrom}
                        name="basic"
                        onFinish={onFinish}
                    >
                        <Form.Item
                            label="到期日期"
                            name="date"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入会员到期日期',
                                },
                            ]}
                        >
                            <DatePicker  placeholder="输入日期必须大于当前日期" style={{ width: 300 }}/> 
                        </Form.Item>
                  
                    </Form>
                </Modal>
    </div>
  )
}
